{{template "admin/header.html"}}
<title>安装 - GPRESS</title>
<script type="text/javascript" src="{{basePath}}admin/js/sha3.min.js"></script>
<style>
    .gpress-install-container {
        padding: 0 20px;
        width: 450px;
        height: auto;
        /* 定位方式 */
        position: absolute;
        /* 距顶部的百分比值，表示向下移动自身高度的一半 */
        top: 45%;
        /* 距左侧的百分比值，表示向右移动自身宽度的一半 */
        left: 50%;
        /* 通过变换函数将其自身的尺寸的一半作为参数传入，从而达到居中效果 */
        transform: translate(-50%, -50%);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        background: #fff;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.5)
    }

    .install_logo {
        margin: -55px auto 20px;
        width: 100px;
        height: 100px;
        background: #fff;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 5px solid #fff;
        overflow: hidden;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .install_logo img {
        width: 100%;
    }
    .gpress-install-other {
        padding: 0;
        width: 100%;
        text-align: center;
		margin-top: 15px;
		margin-bottom: 15px;
    }
    .gpress-install-other a {
        padding-top: 20px;
		text-decoration: underline;
	}
</style>
</head>

<body>
    <div class="gpress-install-container" id="div_use_account">
        <div class="install_logo"><img src="{{basePath}}public/logo.png"></div>
        <div><h2 class="gpress-install-other">安装</h2></div>
        <form  class="layui-form" action="{{basePath}}admin/install" method="post">
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                    </div>
                    <input type="text" name="account" value="" lay-verify="required" placeholder="管理员账号"
                        lay-reqtext="请填写管理员账号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-password"></i>
                    </div>
                    <input type="password" id="password" name="password" value="" lay-verify="required"
                        placeholder="管理员密码" lay-reqtext="请填写管理员密码" autocomplete="off" class="layui-input"
                        lay-affix="eye">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-password"></i>
                    </div>
                    <input type="password" id="password2" value="" lay-verify="required|confirmPassword"
                        placeholder="请再次填写管理员密码" lay-reqtext="请再次填写管理员密码" autocomplete="off" class="layui-input"
                        lay-affix="eye">
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid  layui-bg-blue" lay-submit
                    lay-filter="gpress-install">安装</button>
            </div>
        </form>

        <div class="gpress-install-other">
            <a href="javascript:useChainInstall();">使用区块链钱包</a>
        </div>
    </div>

    <div class="gpress-install-container" id="div_use_wallet" style="display: none;">
        <div class="install_logo"><img src="{{basePath}}public/logo.png"></div>
        <div><h2 class="gpress-install-other">区块链Address</h2></div>
        <form class="layui-form" action="{{basePath}}admin/chaininstall" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">区块链类型</label>
                <div class="layui-input-block">
                  <select name="chainType" lay-filter="chainType" lay-verify="required" lay-reqtext="请选择区块链类型">
                    <option value="">请选择</option>
                    <option value="XUPER">百度超级链</option>
                    <option value="ETH">以太坊</option>
                  </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">Address</label>
                <div class="layui-input-block">
                  <input type="text" name="chainAddress" lay-verify="required" placeholder="区块链Address" lay-reqtext="请填写区块链Address" autocomplete="off" class="layui-input">
                </div>
              </div>
           
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid  layui-bg-blue" lay-submit
                    lay-filter="gpress-chain-install">安装(使用区块链Address)</button>
            </div>
        </form>

        <div class="gpress-install-other">
            <a href="javascript:useAccountInstall();">使用账号密码</a>
        </div>
    </div>

    <script>
        layui.use(function () {
            var form = layui.form;
            var layer = layui.layer;
            // 自定义验证规则
            form.verify({
                // 确认密码
                confirmPassword: function (value, item) {
                    var password = document.getElementById('password').value;
                    var password2 = document.getElementById('password2').value;
                    if (password != password2) {
                        return '两次密码填写不一致';
                    }
                }
            });
            // 提交事件
            form.on('submit(gpress-install)', function (data) {
                var password = document.getElementById('password').value;
                document.getElementById('password').value = sha3_512(password);
                return true; // 提交form
            });

            form.on('submit(gpress-chain-install)', function (data) {
                return true; // 提交form
            });
        });


    function useAccountInstall(){
        document.getElementById('div_use_wallet').style.display="none";
        document.getElementById('div_use_account').style.display="block";
    }
    function useChainInstall(){
        document.getElementById('div_use_wallet').style.display="block";
        document.getElementById('div_use_account').style.display="none";
    }

    </script>

</body>

</html>